<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue条件渲染</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <!-- v-if -->
    <div id="app">
        <h1 v-if="awesome">
            Vue is awesomem！
        </h1>
        <h1 v-else>
            Oh no
        </h1>
        <!-- 在<template>元素上使用v-if条件渲染分组 -->
            <template v-if="ok">
                <h1>Title</h1>
                <p>Paragraph 1</p>
                <p>Paragraph 2</p>
            </template>
            <template v-else>
                <p>中国</p>
                <p>福建省</p>
                <p>厦门市</p>
                <p>思明区</p>
                <p>软件园二期</p>
            </template>
            <!-- 使用随机数来判断要显示什么内容 -->
        <div v-if="Math.random() > 0.5">
            Now you see me 
        </div>
        <div v-else>
            Now you don't
        </div>
        <div v-if="type === 'A'">
            A
        </div>
        <div v-else-if="type === 'B'">
            B
        </div>
        <div v-else-if="type === 'c'">
            C
        </div>
        <div v-else>
            Not A/B/C
        </div>
        <!-- 用key管理可复用的元素 -->
        <template v-if="loginType === 'username'">
                <label>用户名</label>
                <input type="text" placeholder="请输入你的用户名"/>
        </template>
        <template v-else-if="loginType === 'emial'">
                <label>邮箱</label>
                <input type="text" placeholder="请输入你的邮箱"/>
        </template>
        <button @click="toLoginType">
            切换用户登录
        </button>
        <br/>
        <template v-if="loginType1 === 'username1'">
            <label>用户名</label>
            <input type="text" placeholder="请输入用户名" key="username-input"/>
        </template>
        <template v-else-if="loginType1 === 'email'">
            <label>邮箱</label>
            <input type="text" placeholder="请输入邮箱" key="email-input"/>
        </template>
        <button @click="toLoginType1">
            切换用户登录1
        </button>
        <!-- v-show -->
        <h1 v-show="ok">Hello Vue</h1>
    </div>
</body>
<script type="text/javascript">
        const app = new Vue({
            el: '#app',
            data: {
                awesome: false,
                ok: true,
                type: 'a',
                loginType: 'username',
                loginType1: 'email'
            },
            methods: {
                toLoginType: function() {
                    this.loginType = this.loginType === 'username' ? 'emial' : 'username';    
                },
                toLoginType1: function() {
                    this.loginType1 = this.loginType1 === 'username1' ? 'email' : 'username1';
                }
            }
        })
</script>
</html>